<template>
  <div class="warp">
    <video muted id="startvideo" class="video" :src="vedioData" type="video/mp4" autoplay controls="controls"
      @ended="ended"></video>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick  } from 'vue';


const vedioData = ref()
const index = ref(0)
const vedioList = ref([])
onMounted(() => {
  videoStart()
  // screen()
})

//全屏
const screen = () => {
  var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
        el.mozRequestFullScreen || el.msRequestFullScreen;
    if (typeof rfs != "undefined" && rfs) {
   
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
   
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys(`{F11}`);
        }
    }
}

const videoStart = () => {
  const imagesContext = import.meta.globEager('@/assets/video/*.mp4');
  // console.log(imagesContext, Object.entries(imagesContext), 'sssssssssss');
  Object.entries(imagesContext).forEach(item => {
    vedioList.value.push(new URL(item[0], import.meta.url).href)
  })
  vedioData.value = vedioList.value[index.value]
  var video = document.getElementById("startvideo");
  nextTick(()=>{
     video.play();
  })
}

const ended = () => {
  console.log('视频结束');
  index.value++
  if (index.value > vedioList.length) {
    video.pause()
    return
  }
  videoStart()
}

</script>

<style scoped>
.warp {
  width: 100vw;
  height: 95vh;
}

video {
  width: 100%;
  height: 100%;
}
#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
</style>
